<template>
  <div class="page">
    <div class="top">
      <div class="page_wrap">
        <div class="center_img">
          <div class="top_image">
            <img class="logo_image" src="@/assets/fail.png" />
          </div>
        </div>
        <div class="top_text">支付失败</div>
        <div class="flex_center">
          <div class="price_left">￥</div>
          <div class="price_right">{{ convertCent2Dollar(amount) }}</div>
        </div>
      </div>
      <div class="error_text">失败原因：{{ msgInfo }}</div>
      <div class="content_text_box">
        <div class="text_flex flex_between">
          <div class="text_key">订单号</div>
          <div>{{ mer_ord_id }}</div>
        </div>
        <div class="text_flex flex_between">
          <div class="text_key">收款方</div>
          <div>{{ merName }}</div>
        </div>
        <div class="text_flex flex_between">
          <div class="text_key">商品名称</div>
          <div>{{ goodsInf }}</div>
        </div>
      </div>
    </div>
    <!-- 确认支付 -->
    <div class="flag_box" v-if="isSowBtn">
      <van-button class="global_btn btn_w" type="danger" @click="handleSubmitPay">{{ `返回继续支付(${countdown}s)`
      }}</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue'
// import { useCounterStore } from '../../store/counter';
import { convertCent2Dollar } from '@/utils/index'
import { getOrderStatus } from '@/api/api.js'
import { useRoute, useRouter } from 'vue-router'
// const counter = useCounterStore()
const { proxy } = getCurrentInstance()

const route = useRoute();
const router = useRouter();
const countdown = ref(10)
const payType = ref('') // 判断是网银跳转过来的还是 快捷过来的
const urlDataInfo = ref({});
const payInterval = ref(null)
const timer = ref(null);
const userSuccessInfos = ref({})
const isSowBtn = ref(false)
const msgInfo = ref('')
const mer_ord_id = ref('')
const merName = ref('')
const goodsInf = ref('')
const amount = ref('')
const numKeepTime = ref(0)

onMounted(() => {
  let urlParameters = proxy.$globalFn.getStorage('urlParameters')
  if (urlParameters == null) {
    // 获取地址栏中的参数
    if (window.location.search != "") {
      var currentUrl = window.location.search;
    } else {
      var currentUrl = window.location.hash;
    }
    var url = proxy.$globalFn.getUrlParameters(currentUrl);
    proxy.$globalFn.setStorage('urlParameters', url)
  }
  userSuccessInfos.value = proxy.$globalFn.getStorage('urlParameters')
  mer_ord_id.value = userSuccessInfos.value.orderId || ''
  merName.value = userSuccessInfos.value.merName || ''
  goodsInf.value = userSuccessInfos.value.goodsInf || ''
  amount.value = userSuccessInfos.value.amount || ''
  payType.value = route.query.payType || '';
  msgInfo.value = decodeURIComponent(route.query.retMsg) || '';
  console.log('payType.value', payType.value)
  if (payType.value) {
    if (payType.value == "kuaijie") {
      queryOrderStatus();
    }

  } 
  // else {
  //   proxy.$showToast('缺少来源类型数据');
  // }
})

onBeforeUnmount(() => {
  // 在页面关闭前进行清理操作
  payType.value = ''
  payInterval.value = null
  timer.value = null
  clearInterval(timer.value);
  clearInterval(payInterval.value);
});

function getParamsToString(obj) {
  var str = "";
  for (var key in obj) {
    str += key + "=" + encodeURIComponent(obj[key]) + "&";
  }
  return str.substr(0, str.length - 1);
}

// 查询订单状态
function queryOrderStatus() {
  numKeepTime.value++
  clearInterval(payInterval.value);
  payInterval.value = setInterval(function () {
    getData();
  }, 2000);
}

async function getData() {
  var lunQuery = proxy.$globalFn.getStorage('urlParameters')
  lunQuery.orderSign = proxy.$globalFn.getStorage('orderSign')
  // if (numKeepTime.value == 5) return
  // let res = await getOrderStatus(lunQuery)
  isSowBtn.value = true;
  clearInterval(payInterval.value); // 清掉定时查询状态
  timer.value = setInterval(function () {
    countdown.value--;
    if (countdown.value == 0) {
      clearInterval(timer.value);
      router.push('/home')
      return
    }
  }, 1000);
}

// 跳转商户
function handleSubmitPay() {
  clearInterval(payInterval.value);
  clearInterval(timer.value);
  router.push('/home')
  return
}

</script>

<style lang="sass" scoped>
@import '@/styles/variables.scss'
.page
  height: 100%
  background: #fff
  padding: 0px 20px
.page_wrap
  padding-top: 52px
  display: flex
  flex-direction: column
  align-items: center
.center_img
  width: 100%
  height: 65px
  margin-bottom: 6px
  text-align: center
.top_image
  display: inline-block
  width: 52px
  height: 65px
  margin-bottom: 26px
  .logo_image
    width: 100%
    height: 100%
.price_left
  font-size: 16px
  color: $global_color
  font-weight: 500
  color:#222222
.price_right
  font-size: 21px
  color:#222222
  font-weight: 500
.time_top
  margin-top: 12px
  margin-bottom: 16px
.top_three_left
  color: #666666
  font-size: 13px
  margin-right: 13px
.time_box
  // width: 22px
  // height: 22px
  padding: 3px 5px
  background: #EDEEEF
  color: $global_font_color
  font-size: 12px
  font-weight: bold
  border-radius: 4px
.dian
  color: $global_font_color
  font-size: 12px
  margin: 0px 3px
.content_text_box
  border-radius: 8px
  padding: 15px
  background: #F5F5F5
  color: #333333
  // background: rgb(245, 245, 245)
.payType_box
  border-radius: 10px
  padding: 18px
  padding-bottom: 0px
  background: #FFFFFF
  margin-top: 20px
  .title
    color: #222222
    font-size: 16px
    font-weight: bolder
    margin-bottom: 7px
.payType_first
  padding: 20px 0px
  border-bottom: 1px solid #E9E9E9
  position: relative
  .pay_img_box
    width: 20px
    height: 20px
  .pay_text
    color: $global_font_color
    font-size: 15px
    margin-left: 12px
  .dui_box
    width: 19px
    height: 19px
    align-self: flex-end
    position: absolute
    right: 0px
.payType_first:last-child
  border-bottom: none

.flag_box
  margin-top: 40px
  text-align: center
.text_flex
  color: #666666
  font-size: 13px
  margin-bottom: 7px
  .text_key
    min-width: 55px
.top_text
  text-align: center
  margin-bottom: 12px
  color: #222222
  font-size: 14px
  font-weight: 500
.btn_w
  width:288px
.error_text
  margin-top: 30px
  margin-bottom: 12px
  color: $global_color
  font-size: 14px
  margin-left: 16px
</style>
